<?php
	$dsn = "mysql: host=localhost;dbname=tk173;charset=utf8";
	$pdo = new PDO($dsn,"root","root");
	$sql = "select id,title,date,source from article ";
	$stat= $pdo->query($sql);
	$total =$stat->rowCount();
	$page =1;
	$every = 10;
	$pages = ceil($total/$every);
  	$start = ($page-1) * $every;
  	$sql.= " limit {$start},$every";
  	 $res = $pdo->query($sql);
  	 $data =$res->fetchAll(2);
?>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分页</title>
	<script src="./public.js"></script>
</head>
<body>
	<table border="1" cellpadding="0" cellspacing="0" width="850px">
		<thead>
			<tr >
				<th>id</th>
				<th>标题</th>
				<th>时间</th>
				<th>来源</th>
			</tr>
		</thead>

		<tbody id="body">
			<?php foreach ($data as $vo) {
				
			?>
				<tr align="center" height="30px">
					<td><?=$vo['id']?></td>
					<td><?=$vo['title']?></td>
					<td><?=$vo['date']?></td>
					<td><?=$vo['source']?></td>
				</tr>
			
		<?php }?>		
		</tbody>
		<tfoot>
				<tr align="center" height="30px">
					<td colspan="4">
						<span id ="prev">上一页</span>&nbsp;&nbsp;&nbsp;
					第<span id="cur"><?= $page?></span>页/共<?=$pages?>页&nbsp;&nbsp;&nbsp;
					<span id="next">下一页</span>
					</td>
				</tr>
		</tfoot>
	</table>
	<script >
			var prev = document.getElementById("prev");
			var next = document.getElementById("next");
			var cur = document.getElementById("cur");
			var body = document.getElementById("body");
			var ajax = createAjax();
			next.onclick = function(){
				var nextPage = parseInt(cur.innerHTML)+1;
				console.log(nextPage);
				ajax.onreadystatechange = function(){
					if(ajax.readyState==4&&ajax.status==200){
					var res = ajax.responseText;
					var resp = eval("("+res+")");
					var data =resp['data'];
					var str="";
					for( var i in data){
							str+="<tr align='center' height='30px'>";

							str+="<td>"+data[i]['id']+"</td>";
							str+="<td>"+data[i]['title']+"</td>";
							str+="<td>"+data[i]['date']+"</td>";
							str+="<td>"+data[i]['source']+"</td>";
							str+="</tr>";
					}
						body.innerHTML =str;
						cur.innerHTML = resp['page'];

					}
				}
						ajax .open("get","dopage.php?p="+nextPage);
						ajax.send();
			}
			prev.onclick = function(){
				var prevPage = parseInt(cur.innerHTML)-1;
				ajax.onreadystatechange = function(){
					if(ajax.readyState==4&&ajax.status==200){
					var res = ajax.responseText;
					var resp = eval("("+res+")");
					var data =resp['data'];
					var str="";
					for( var i in data){
							str+="<tr align='center' height='30px'>";

							str+="<td>"+data[i]['id']+"</td>";
							str+="<td>"+data[i]['title']+"</td>";
							str+="<td>"+data[i]['date']+"</td>";
							str+="<td>"+data[i]['source']+"</td>";
							str+="</tr>";
					}
						body.innerHTML =str;
						cur.innerHTML = resp['page'];

					}
				}
					ajax .open("get","dopage.php?p="+prevPage);
					ajax.send();

			}

	</script>

<!-- 	<script>
	function foo(a,b){
		return b(a);
	}
	var res = foo(10,function(x){
		return x*x;
	})
	console.log(res);
</script> -->
</body>
</html>